<!DOCTYPE html>
<html lang="en">
    <head>
        {include file="common/meta" /}

        <style type="text/css">
            body {
                color:#999;
                background:url('/assets/img/loginbg.png');
                background-size:cover;
            }
            a {
                color:#fff;
            }
            .login-panel{margin-top:150px;}
            .login-screen {
                max-width:400px;
                padding:0;
                margin:100px auto 0 auto;

            }
            .login-screen .well {
                border-radius: 3px;
                -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                /*background: rgba(255,255,255, 0.2);*/
                background: #fff;
            }
            .login-screen .copyright {
                text-align: center;
            }
            @media(max-width:767px) {
                .login-screen {
                    padding:0 20px;
                }
            }
            .profile-img-card {
                width: 100px;
                height: 100px;
                margin: 10px auto;
                display: block;
                -moz-border-radius: 50%;
                -webkit-border-radius: 50%;
                border-radius: 50%;
            }
            .profile-name-card {
                text-align: center;
            }

            #login-form {
                margin-top:20px;
            }
            #login-form .input-group {
                margin-bottom:15px;
            }
            .input-group-addon{
                padding: 3px;
            }
            .glyphicon-user1{
                width: 23px;
                height: 23px;
                display: block;
                background:url('/assets/img/user.png') no-repeat center;
                background-size: 100%;
            }
            .glyphicon-lock1{
                width: 23px;
                height: 23px;
                display: block;
                background:url('/assets/img/password.png') no-repeat center;
                background-size: 100%;
            }
            .glyphicon-option-horizontal1{
                width: 23px;
                height: 23px;
                display: block;
                background:url('/assets/img/yzm.png') no-repeat center;
                background-size: 100%;
            }
            .btn-success{
                background-color: #3C89FF;
                border-radius: 20px;
                width: 80%;
                margin: 0 auto;
            }
            .sendmsg{
                width: 30%;
                text-align: center;
                padding: 0;
                line-height: 30px;
            }

        </style>
    </head>
    <body>
        <div class="container">
            <div class="login-wrapper">
                <div class="login-screen">
                    <div class="well">
                        <div class="login-form">
                            <img id="profile-img" class="profile-img-card" src="__CDN__/assets/img/avatar.png" />
                            <p id="profile-name" class="profile-name-card"></p>

                            <form action="" method="post" id="login-form">
                                <div id="errtips" class="hide"></div>
                                {:token()}
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <span class="glyphicon glyphicon-user1" aria-hidden="true">
                                        <!--<img class="profile-img-card" src="__CDN__/assets/img/user.png" />-->
                                        </span>
                                    </div>
                                    <input type="text" class="form-control" id="pd-form-username" placeholder="请输入手机号" name="username" autocomplete="off" value="" data-rule="required"/>
                                </div>

                                <div class="input-group">
                                    <div class="input-group-addon"><span class="glyphicon glyphicon-lock1" aria-hidden="true"></span></div>
                                    <input type="text" class="form-control" id="pd-form-password" placeholder="请输入验证码" name="password" autocomplete="off" value="" data-rule="required"  style="width: 70%" />
                                    <input type="button" class="form-control sendmsg" value="获取短信验证码" style="width: 30%" onclick="send()"/>
                                </div>

                                {if $config.fastadmin.login_captcha}
                                <!--<div class="input-group">-->
                                    <!--<div class="input-group-addon"><span class="glyphicon glyphicon-option-horizontal1" aria-hidden="true"></span></div>-->
                                    <!--<input type="text" name="captcha" class="form-control" placeholder="{:__('Captcha')}" data-rule="{:__('Captcha')}:required;length(4)" />-->
                                    <!--<span class="input-group-addon" style="padding:0;border:none;cursor:pointer;">-->
                                        <!--<img src="{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha" width="100" height="30" onclick="this.src = '{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha&r=' + Math.random();"/>-->
                                    <!--</span>-->
                                <!--</div>-->
                                {/if}
                                <div class="form-group">
                                    <label class="inline" for="keeplogin">
                                        <input type="checkbox" name="keeplogin" id="keeplogin" value="1" />
                                        {:__('Keep login')}
                                    </label>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-success btn-lg btn-block">{:__('Sign in')}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!--&lt;!&ndash; FastAdmin是开源程序，建议在您的网站底部保留一个FastAdmin的链接 &ndash;&gt;-->
                    <!--<p class="copyright"><a href="https://www.fastadmin.net">Powered By FastAdmin</a></p>-->
                </div>
            </div>
        </div>
        {include file="common/script" /}
    <script>
        function send()
        {
            var flag = true;
            var phone = $('#pd-form-username').val();
            if(phone == ''){
                flag = false;
                Toastr.error('请输入手机号');
            }
            if(!(/^1[3456789]\d{9}$/.test(phone))){
                flag = false;
                Toastr.error('手机号码格式有误，请重填');
            }
            if(flag){
                $(this).attr("disabled",true);
                let time = 60;
                    setInterval(function () {
                        flag = false;
                        if(time == 0){
                            $(".sendmsg").removeAttr("disabled");
                            $(".sendmsg").val("获取短信验证码");
                            clearInterval(timer);
                            time = 60;
                            flag = true;
                        }else {
                            console.log(time);
                            $(".sendmsg").val(time + " s 重新发送");
                            time=time-1;
                        }
                    },1000);
                $.ajax({
                    url:'sms/send',
                    data: {mobile:phone,event:'login'},
                    type:'POST',
                    dataType: "json",
                    success: function (res) {
                        console.log(res);
                        Toastr.error(res.msg);
                        // htmls ='<option value="0" selected>顶级</option>';
                        // if(res.data.level != 3){
                        //     Toastr.error('请选择三级行业');
                        // }else{
                        //     var list = res.data.groups;
                        //     if(list.length > 0){
                        //         htmls = '';
                        //         for(let i = 0; i<list.length;i++){
                        //             htmls+='<option value="'+list[i].id+'">'+list[i].name+'</option>';
                        //         }
                        //     }
                        // }
                        // $('#c-parent_id').html(htmls);
                    }
                });
            }

        }
    </script>
    </body>
</html>